/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

(function($){
    //img标签 包装集
    $.fn.movieSlice = function(options) {
      var setting = $.extend({
          movieElement:"#movieElement",
          next:"#nextMovie",
          prev:"#prevMovie",
          first:"#firstMovie",
          last:"#lastMovie",
          replacePath:function(str,path) {
              if(path) {
                  return str.replace(/thumbnail/,path);
              }else {
                  return str.replace(/thumbnail/,"movie");
              }
          }
      },options||{});
    
      var thumbnails = this;
      /**
       * 为每一个缩略图设定相应的数据
       * 以此可以在showPhoto通过下标访问
       */
      thumbnails.each(function(n) {
          $(this).data("photo-number",n);
      });
      setting.cur = 0;
      this.on("click",function(event){
          //$(setting.movieElement).attr("src",setting.replacePath($(this).attr("src"),"movie"));
          showPhoto($(this).data("photo-number"));
      });
      
      $(setting.movieElement).on("click",function() {
          showPhoto(setting.cur+1);
      });
      
      $(setting.prev).on("click",function(){
          showPhoto(setting.cur-1);
      });
      $(setting.next).on("click",function(){
//          if(!$(setting.movieElement).is(":animated"))
//          {
//            //$(setting.movieElement).stop();
//            showPhoto(setting.cur+1);
//          }
            showPhoto(setting.cur+1);
      });
      $(setting.first).on("click",function(){
          showPhoto(0);
      });
      $(setting.last).on("click",function(){
          showPhoto(thumbnails.length-1);
      });
      
      function showPhoto(index) {
          if(index<0) {
              index = thumbnails.length-1;
          }else if(index >= thumbnails.length) {
              index = 0;
          }
          
          $(setting.movieElement).attr("src",setting.replacePath(thumbnails[index].src))
                  //来一个动画效果 
                  .stop()
                  .css("opacity","0.0").animate({opacity:1.0},1000);
          setting.cur = index;
          
      }
      showPhoto(0);
      return this;
    };
    
    
})(jQuery)

